<template>
  <el-dialog :visible.sync="value" :before-close="() => $emit('input', false)">
    <template slot="title">
      岗位权限设置
    </template>
    <el-tree
      :data="permissionList"
      show-checkbox
      default-expand-all
      node-key="menuId"
      :default-checked-keys="defaultCheckedKeys"
      ref="tree"
      highlight-current
      :render-content="renderContent"
      :check-strictly="true"
      @check-change='checkChange'
      :props="defaultProps">
    </el-tree>
    <div slot="footer" class="dialog-footer">
      <el-button @click="$emit('input', false)">取 消</el-button>
      <el-button type="primary" @click="configMenuTree">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { form, grid, dialog } from '@/build';

import {
  authPermissionListGetApi,
  authPermissionListSaveApi,
  // authPermissionMenuListGetApi,
} from '@/services/api/permission';

// import EditAccountDialog from './editAccountDialog';

export default {
  name: 'permission-tree',

  mixins: [form, grid, dialog],

  // components: {
  //   EditAccountDialog,
  // },

  props: {
    value: Boolean,
    jobId: Number,
  },

  data() {
    return {
      defaultProps: {},
      permissionList: [],
      jobPermission: [],
      relevanceList: [
        {
          fromMenuId: 30007,
          toMenuId: 30006,
        },
        {
          fromMenuId: 30009,
          toMenuId: 30008,
        },
        {
          fromMenuId: 30103,
          toMenuId: 30102,
        },
        {
          fromMenuId: 30105,
          toMenuId: 30104,
        },
        {
          fromMenuId: 30401,
          toMenuId: 30400,
        },
        {
          fromMenuId: 30403,
          toMenuId: 30402,
        },
        {
          fromMenuId: 40012,
          toMenuId: 40011,
        },
        {
          fromMenuId: 40014,
          toMenuId: 40013,
        },
        {
          fromMenuId: 40103,
          toMenuId: 40102,
        },
        {
          fromMenuId: 40105,
          toMenuId: 40104,
        },
        {
          fromMenuId: 40303,
          toMenuId: 40302,
        },
        {
          fromMenuId: 40305,
          toMenuId: 40304,
        },
        {
          fromMenuId: 40701,
          toMenuId: 40700,
        },
        {
          fromMenuId: 40703,
          toMenuId: 40702,
        },
      ],
    };
  },

  computed: {
    defaultCheckedKeys() {
      const menus = [];
      const flattenedPermission = this.flattenPermissionList(this.permissionList);
      _.map(flattenedPermission, (item) => {
        if (item.selected == 1) {
          menus.push(item.menuId);
        }
      });
      return menus;
    },


    checkedKey() {
      return this.$refs.tree && this.$refs.tree.getCheckedKeys();
    },
  },

  watch: {
    checkedKey: {
      handler(current, prev) {
        if (!_.isEmpty(prev)) {
          this.doSave({ action: 'permissionSave' });
        }
      },
      deep: true,
    },
  },

  methods: {
    renderContent(h, { node, data, store }) {
      // const items = _.map(data.children, (item, index) => {
      //   return <el-checkbox v-model={item.selected} onClick:stop>{item.name}</el-checkbox>
      // })
      return (
          <span class="custom-tree-node">
          <span>{data.name}</span>
        </span>);
    },

    setCheckedKeys(keys) {
      this.$refs.tree.setCheckedKeys(keys);
    },
    checkChange(data, isChecked, hasCheckedChildren) {
      let childrenMenu = [];
      const children = this.flattenPermissionList(data.children);
      _.each(children, (item) => {
        if (item.selected == 1) {
          childrenMenu.push(item.menuId);
        }
      });
      const checkedMenu = _.map(this.$refs.tree.getCheckedNodes(), item => item.menuId);
      if (isChecked) {
        childrenMenu = this.checkRelevance(data, checkedMenu);
        this.setCheckedKeys(_.union(childrenMenu, checkedMenu));
      } else {
        this.setCheckedKeys(_.difference(checkedMenu, childrenMenu));
      }
    },
    checkRelevance(data) {
      const val = _.find(this.relevanceList, { fromMenuId: data.menuId });
      if (val) {
        return [val.toMenuId];
      }
      return undefined;
    },
    configMenuTree() {
      const checkedKeys = this.$refs.tree.getCheckedKeys();
      authPermissionListSaveApi({ menuList: checkedKeys.join(','), jobId: this.jobId }).then(([result, data]) => {
        if (result) {
          this.$emit('input', false);
        }
      });
    },
    flattenPermissionList(permissionList) {
      let flattenedPermission = [];
      _.each(permissionList, (item) => {
        flattenedPermission.push(item);
        if (item.children) {
          flattenedPermission = flattenedPermission.concat(this.flattenPermissionList(item.children));
        }
      });
      return flattenedPermission;
    },
  },

  mounted() {
    // this.bindGet(authPermissionMenuListGetApi, 'permissionList', {});
    this.bindGet(authPermissionListGetApi, 'permissionList', {
      sendingData: { jobId: this.jobId },
    });

    this.getAll();
  },
};
</script>
